<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>客户地址管理</title>
    <link rel="stylesheet" href="../../zui/css/zui.min.css">
    <link rel="stylesheet" href="../../zui/css/zui-theme.css">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link href="../../zui/lib/datatable/zui.datatable.min.css" rel="stylesheet">
    <link href="../../zui/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
</head>
<body style="padding: 10px;">
<div class="section-title" style="margin-bottom: 10px;">
    <span>客户地址管理</span>
</div>
<div class="alert alert-primary">
    <h4><span class="red">温馨提示：</span></h4>
    <hr>
    <div>
        请完善您相关客户的地址信息，以便开具发票时最终的物流配送
    </div>
</div>
<div class="table-search-wrap">
    <div class="input-group" style="max-width:600px">
        <span class="input-group-addon">收件人</span>
        <input type="text" class="form-control" placeholder="">
        <span class="input-group-addon">状态</span>
        <select name="" id="" class="form-control">
            <option value="">全部</option>
        </select>
        <span class="input-group-btn">
            <button class="btn btn-primary" type="button">搜索</button>
        </span>
        <span class="input-group-btn">
            <button class="btn btn-success" data-toggle="modal" data-target="#addAdress" type="button">新增</button>
        </span>
    </div>
</div>

<table class="table datatable">
    <thead>
    <tr>
        <th>客户公司名称</th>
        <th>收件人</th>
        <th>收件人手机号</th>
        <th>收货地址</th>
        <th>客户邮箱地址</th>
        <th>状态</th>
        <th>最后操作时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
            <a class="btn btn-xs" href="">编辑</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
            <a class="btn btn-xs" href="">编辑</a>
        </td>
    </tr>
    </tbody>
</table>

<ul class="pager">
    <li class="previous"><a href="">«</a></li>
    <li><a href="">1</a></li>
    <li class="active"><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li class="next"><a href="">»</a></li>
</ul>

<div class="modal fade" id="addAdress">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">新增客户地址</h4>
            </div>
            <div class="modal-body">

                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="red">*</span><span>客户邮箱地址</span>
                    </span>
                    <input type="text" class="form-control">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">
                        &emsp;&emsp;&emsp;&emsp;<span class="red">*</span><span>状态</span>
                    </span>
                    <input type="text" readonly class="form-control">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">
                        &emsp;&emsp;&emsp;<span class="red">*</span><span>收件人</span>
                    </span>
                    <input type="text" class="form-control">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="red">*</span><span>收件人手机号</span>
                    </span>
                    <input type="text" class="form-control">
                </div>
                <br>
                <div class="input-group">
                    <span class="input-group-addon">
                        &emsp;&emsp;<span class="red">*</span><span>收件地址</span>
                    </span>
                    <textarea name="" class="form-control" id="" rows="2"></textarea>
                </div>
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<script src="../../zui/lib/jquery/jquery%20v1.11.0.js"></script>
<script src="../../zui/js/zui.min.js"></script>
<script src="../../zui/lib/datatable/zui.datatable.min.js"></script>
<script src="../../zui/lib/datetimepicker/datetimepicker.min.js"></script>
<script>
    $('.tab li').on('click',function () {
        $(this).addClass('active').siblings().removeClass('active');
    })
    $('table.datatable').datatable({
        checkable: true,
    });
    $(".form-date").datetimepicker(
        {
            language:  "zh-CN",
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy-mm-dd"
        });
</script>
</body>
</html>
